<template>
  <div id="wrap">
    <img src="../assets/images/logo.png" class="logo" alt="">
    <p>
        <label for="username">账号</label>
        <input type="text" id="username" placeholder="请输入用户名" v-model.trim="username">
        <span ref="tips1" class="tips" style="display:none">请输入正确的用户名</span>
    </p>
    <p>
        <label for="password">密码</label>
        <input type="password" id="password" placeholder="请输入密码" v-model.trim="password">
        <span ref="tips2" class="tips" style="display:none">请输入正确的密码</span>
    </p>
    <div>
        <button @click="login">登录</button>
        <button @click="regist">注册</button>
    </div>
  </div>
</template>

<script>
import { loginAPI } from '@/api/loginAPI.js'
import { regUserAPI } from '@/api/regUserAPI.js'
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    regFailed  () {
      this.$message.error('注册失败, 请更换用户名')
    },
    regSuccess () {
      this.$message({
        message: '注册成功',
        type: 'success'
      })
    },
    loginSuccess () {
      this.$message({
        message: '登录成功, 正在跳转到首页...',
        type: 'success'
      })
    },
    async regist () {
      if (this.username === '' || this.password === '') return alert('请输入账号和密码')
      const { data: res } = await regUserAPI(this.username, this.password)
      if (res.status === 1) {
        this.regFailed()
      } else {
        this.regSuccess()
      }
      this.username = ''
      this.password = ''
    },
    async login () {
      if (this.username === '' || this.password === '') return alert('请输入账号和密码')
      const { data: res } = await loginAPI(this.username, this.password)
      console.log(res)
      if (res.status === 1) {
        // 登录失败
        localStorage.removeItem('token')
        this.$refs.tips1.style.display = 'block'
        this.$refs.tips2.style.display = 'block'
      } else {
        // 登陆成功
        // 存储token
        localStorage.setItem('token', res.token)
        this.loginSuccess()
        setTimeout(() => {
          this.$router.push('/index')
        }, 3000)
      }
    }
  }
}
</script>

<style scoped>
#wrap{
    height: 100vh;  /* vh vw */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: #0a0909 url(../assets/images/index_bg.jpg) no-repeat center;
    background-size: cover;
}
.logo{
    width: 400px;
    margin-bottom: 100px;
}
#wrap p{
    width: 550px;
    display: flex;
    margin-bottom: 50px;
    background: #fff;
    font-size: 24px;
    border-radius: 30px;
    line-height: 65px;
    position: relative;
}
#wrap label{
    width: 130px;
    background: #ff8400;
    color: #fff;
    text-align: center;
    border-radius: 30px;
}
#wrap input{
    width: 100%;
    border: none;
    font-size: 20px;
    color: #b2b2b2;
    padding-left: 10px;
    border-radius: 0 30px 30px 0;
}
#wrap .tips{
    position: absolute;
    top: 0;
    right: 20px;

    font-size: 16px;
    color: red;
}
input::placeholder{
    color: #ccc;
    font-size: 16px;
}
#wrap button{
    width: 120px;
    height: 65px;
    margin: 0 10px;
    background: #ff8400;

    font-size: 24px;
    color: #fff;
    border-radius: 30px;
}
#wrap button:nth-child(2){
    background: #cc2e2a;
}
</style>
